<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品秒杀</title>
    <style>
        .ads{
            width: 600px;
            height: 400px;
        }
        .container{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bt{
            font-family: "华文琥珀";
        }
        .y{
            font-size: 40px;
            color: #f00;
        }
        .bj{
            font-size: 20px;
            width: 800px;
            height: 34px;
            color: white;
            background-color: deeppink;
        }
        .kt{
            width: 800px;
            height: 34px;
            margin: -35px 550px 0 40px ;
        }
        .hz{
            width: 800px;
            height: 34px;
            margin: -32px 0 0 550px ;
        }
        .sz{
            width: 30px;
            height: 30px;
        }
        .l{
            width: 800px;
            height: 34px;
            margin: 2px;
        }
        .o{
            font-size: 15px;
        }
        #d{
            background-color: black;
        }
        #h{
            background-color: black;
        }
        #m{
            background-color: black;
        }
        #s{
            background-color: black;
        }
    </style>
</head>
<body>
    <h1 align="center" class="bt">长江存储固态硬盘<span class="y">秒杀!</span></h1>
    <div class="container">
        <div><img src="../images/gutai.png" class="ads-img"></div>
        <div class="bj">
            <div class="l"><img src="../images/时钟.png" class="sz"></div>
            <div class="kt">京东秒杀</div>
            <div class="hz"><span class="o">距离结束 &nbsp;</span>
            <span id="d"></span>:
            <span id="h"></span>:
            <span id="m"></span>:
            <span id="s"></span>
        </div>
        </div>
    </div>
    <script>
        //1设置结束时间
        var endTime=new Date('2023-05-27 20:00:00').getTime();
        var timer=setInterval(killTime,1000);
        function killTime(){
        var beginTime=new Date().getTime();
        var durationTime=(endTime-beginTime)/1000;
        //把durationTime转换为天，小时分钟与秒6
        if(durationTime>0){
            var d=Math.floor(durationTime/(3600*24));
            var h=Math.floor((durationTime%(3600*24))/3600);
            var m=Math.floor(durationTime%3600/60);
            var s=Math.floor(durationTime%60);
            //补0
            d=d<10?'0'+d:d;
            h=h<10?'0'+h:h;
            m=m<10?'0'+m:m;
            s=s<10?'0'+s:s;
            document.getElementById("d").innerHTML=d;
            document.getElementById("h").innerHTML=h;
            document.getElementById("m").innerHTML=m;
            document.getElementById("s").innerHTML=s;
            }else{
                clearInterval(timer);
            }
        }
    </script>
</body>
</html>